<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>评价</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #f3f3f3;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.goods-info {
			width: 100%;
			padding: 15px 10px;
			display: flex;
			align-items: center;
			background: #fff;
		}
		.goods-info img {
			width: 65px;
			height: 53px;
		}
		.goods-name {
			margin-left: 8px;
			font-size: 14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.evaluate-input-back {
			margin-top: 15px;
			padding: 20px 12px;
			background: #fff;
		}
		.evaluate-title {
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.evaluate-textarea {
			margin-top: 5px;
		}
		.evaluate-textarea textarea {
			border: 1px solid #eee;
			font-size: 14px;
		}
		.evaluate-btn {
			margin-top: 35px;
			padding: 0 40px;
		}
		.evaluate-btn .mui-btn {
			padding: 12px 0;
			border-radius: 24px;
			background: linear-gradient(#4fd4fc, #6aa6f7);
			color: #fff;
			font-size: 16px;
		}
		.score-star-back {
			margin-top: 15px;
			padding: 15px 10px;
			background: #fff;
			display: flex;
			align-items: center;
		}
		.score-name {
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.score-star {
			margin-left: 10px;
		}
		.score-star img {
			margin-left: 10px;
			width: 20px;
			height: 20px;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">评价</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<div class="mui-content">
		<div class="goods-info">
			<img id="imgUrl" src="../img/homePage/home-beijing.png" />
			<div class="goods-name mui-ellipsis"></div>
		</div>
		<div class="score-star-back">
			<div class="score-name">评分</div>
			<div class="score-star">
				<img data-option="1" src="../img/admission/score-star.png" />
				<img data-option="2" src="../img/admission/score-star.png" />
				<img data-option="3" src="../img/admission/score-star.png" />
				<img data-option="4" src="../img/admission/score-star.png" />
				<img data-option="5" src="../img/admission/score-star.png" />
			</div>
		</div>
		<div class="evaluate-input-back">
			<div class="evaluate-title">评价</div>
			<div class="evaluate-textarea">
				<textarea id="textarea" rows="5" placeholder="亲，请给出您宝贵的评价吧！"></textarea>
			</div>
		</div>
		<div class="evaluate-btn">
			<button id="addVisaEvaluation" type="button" class="mui-btn mui-btn-block">提交评价</button>
		</div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var orderNo = base.getParameter("orderNo");
		var objId = base.getParameter("objId");
		var ticketType = base.getParameter("ticketType");
		$(function() {
			if (ticketType == 1) {//1：门票，2：周游券
				getTicketsInfo();
			}else if (ticketType == 2) {
				getTravelVouchersInfo();
			}else {
				getCarInfo();
			}
		});
		$(".score-star img").on('tap', function() {
			var star = $(this).attr("data-option");
			$(".score-star img").each(function(i) {
				if (i <= (star-1) ) {
					$(this).attr("src", "../img/admission/score-star-active.png");
				}else{
					$(this).attr("src", "../img/admission/score-star.png");
				}
			});
		});
		//获取门票详情
		function getTicketsInfo() {
			var data = {
				customerId: customerId,
				ticketsId: objId,
			}
			base.postData(base.url.getTicketsInfo, data, function(data) {
				if (data.success) {
					$("#imgUrl").attr("src", data.extendData.imgUrl);
					$(".goods-name").html(data.extendData.ticketsName);
				} else {
					mui.toast(data.message);
				}
			});	
		}
		//获取周游券详情
		function getTravelVouchersInfo() {
			var data = {
				customerId: customerId,
				travelVouchersId: objId,
			}
			base.postData(base.url.getTravelVouchersInfo, data, function(data) {
				if (data.success) {
					$("#imgUrl").attr("src", data.extendData.imgUrl);
					$(".goods-name").html(data.extendData.travelVouchersName);
				} else {
					mui.toast(data.message);
				}
			});	
		}
		function getCarInfo() {
			var params = {
				customerId: customerId,
				carId: objId
			}
			base.postData(base.url.getCarInfo, params, function(data) {
				if (data.success) {
					$("#imgUrl").attr("src", data.extendData.imgUrl);
					$(".goods-name").html(data.extendData.carName);
				} else {
					mui.toast(data.message);
				}
			});	
		}
		
		$("#addVisaEvaluation").on('tap', function() {
			var stars = 0;
			$(".score-star img").each(function(i) {
				if ($(this).attr("src").indexOf("score-star-active") != -1) {
					stars ++;
				}
			});
			if (stars == 0) {
				mui.toast("请先评分！");
				return;
			}
			var msg = $("#textarea").val();
			if (msg == null || msg == "") {
				mui.toast("请输入点评内容");
				return;
			}
			var params = {
				customerId: customerId,
				orderNo: orderNo,
				msg: msg,
				stars: stars
			}
			base.postData(base.url.addVisaEvaluation, params, function(data) {
				if (data.success) {
					mui.toast(data.message);
					setTimeout(function() {
						window.location.href='admissionOrderList.html?customerId='+customerId+"&orderType=0";
					}, 1000)
				} else {
					mui.toast(data.message);
				}
			});	
		});
	</script>
</body>
</html>
